<template>
    <div id="routeNameIndex" class="container-fluid padding">
        <table id="routeNameList" lay-filter="routeNameList"></table>
        <script type="text/html" id="bar">
          <div class="layui-btn-container">
            <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh" >刷新列表</button>
          </div>
        </script>
        <script type="text/html" id="listToolbar">
          <div class="layui-btn-container" >
            <button class="el-button el-button--success el-button--mini is-round" lay-event="edit">修改</button>
          </div>
        </script>
        <!--隐藏项-->
        <div id="edit" style="display: none">
            <el-form :model="saveDatas" :rules="rules" ref="saveDatas" label-width="100px" class="padding">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="saveDatas.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="中文名" prop="description">
                    <el-input v-model="saveDatas.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('saveDatas')">保存</el-button>
                    <el-button @click="resetForm('saveDatas')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "routeName",
        created:function(){
            this.$nextTick(function () {
                layui.use('table',()=>{
                    this.refreshTable();
                    layui.table.on('toolbar(routeNameList)', (obj) => {
                        switch(obj.event){
                            case "refresh":
                                noCheckCache = true;
                                this.refreshTable();
                                break;
                        };
                    });
                    layui.table.on('tool(routeNameList)',(obj)=>{
                        switch(obj.event){
                            case "edit":
                                allId = obj.data.name;
                                allType = 'edit'
                                this.saveDatas = obj.data;
                                this.$message_.layOpen('#edit',()=>{
                                    if (allSuccess=='success'){
                                        obj.update(obj.data)
                                    }
                                })
                                break;
                        };
                    })
                });
            });
        },
        data() {
            return {
                saveDatas:{
                    name:"",
                    description:"",
                },
                table_head: [
                    {field: 'name', title: '名称', sort: true, totalRowText: '总条数'}
                    , {field: 'description', title: '中文名', sort: true}
                    , {fixed: 'right', width: 285, align: 'center', templet: '#listToolbar'}
                ],
                rules:{
                    name:[
                        {required:true,message:'请填写名称',trigger:'blur'},
                    ],
                    description:[
                        {required:true,message:'请填写中文名',trigger:'blur'},
                    ],
                }
            }
        },
        methods: {
            refreshTable:function () {
                this.$message_.layTable(this, 'qx-routename/list', '#routeNameList', {}, this.table_head, 600, '#bar',true);
            },
            submitForm:function (name) {
                this.$refs[name].validate((valide)=>{
                    if (valide){
                        switch (allType){
                            case "edit":
                                this.$message_.postTips(this,'修改','qx-routename/update?id='+allId,{AuthItem:this.saveDatas});
                                break;
                        }
                    }else {
                        return false;
                    }
                })
            }
        }
    }
</script>